<template>
	<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px" :title="`${drawerProps.title}用户`">
		<el-form
			ref="ruleFormRef"
			label-width="100px"
			label-suffix=" :"
			:rules="rules"
			:disabled="drawerProps.isView"
			:model="drawerProps.rowData"
			:hide-required-asterisk="drawerProps.isView"
		>
			<el-form-item label="学号/工号" prop="uid">
				<el-input v-model="drawerProps.rowData.uid" placeholder="请填写学号或工号" />
			</el-form-item>
			<el-form-item label="用户名" prop="username">
				<el-input v-model="drawerProps.rowData.username" placeholder="请填写用户名" />
			</el-form-item>
			<el-form-item label="手机号" prop="mobile">
				<el-input v-model="drawerProps.rowData.mobile" placeholder="请填写手机号" />
			</el-form-item>
			<el-form-item label="邮箱" prop="mail">
				<el-input v-model="drawerProps.rowData.mail" placeholder="请填写邮箱" />
			</el-form-item>
			<el-form-item label="角色" prop="role">
				<el-select v-model="drawerProps.rowData.role" placeholder="请选择角色">
					<el-option label="学生" value="student" />
					<el-option label="老师" value="teacher" />
					<el-option label="校外来访人员" value="visitor" />
					<el-option label="校内职工" value="staff" />
					<el-option label="安保人员" value="security" />
					<el-option label="校内司机" value="driver" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="drawerVisible = false">取消</el-button>
			<el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确定</el-button>
		</template>
	</el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { checkPhoneNumber } from "@/utils/eleValidate";

const rules = reactive<FormRules>({
	uid: [{ required: true, trigger: "blur" }],
	username: [
		{ required: true, message: "请输入用户名，用户名为用户姓名", trigger: "blur" },
		{ min: 2, max: 5, message: "用户名应包含2~5个字符", trigger: "blur" }
	],
	mobile: [{ required: true, validator: checkPhoneNumber, trigger: "blur" }],
	mail: [{ required: false, trigger: "blur" }],
	role: [
		{
			required: true,
			message: "请选择角色",
			trigger: "change"
		}
	]
});

interface DrawerProps {
	title: string;
	isView: boolean;
	rowData?: any;
	api?: (params: any) => Promise<any>;
	getTableList?: () => Promise<any>;
}

// drawer框状态
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
	isView: false,
	title: ""
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps): void => {
	drawerProps.value = params;
	drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
	ruleFormRef.value!.validate(async valid => {
		if (!valid) return;
		try {
			await drawerProps.value.api!(drawerProps.value.rowData);
			ElMessage.success({ message: `${drawerProps.value.title}用户成功！` });
			drawerProps.value.getTableList!();
			drawerVisible.value = false;
		} catch (error) {
			console.log(error);
		}
	});
};

defineExpose({
	acceptParams
});
</script>
